import React from "react";
import PropTypes from "prop-types";
import DatePicker from "antd/lib/date-picker";
import { clientConfig } from "@/services/auth";
import { Moment } from "@/components/proptypes";

const DateInput = React.forwardRef(({ defaultValue, value, isMonth, onSelect, className, ...props }, ref) => {
  const format = isMonth ? "YYYY-MM" : (clientConfig.dateFormat || "YYYY-MM-DD");
  const additionalAttributes = {};
  if (defaultValue && defaultValue.isValid()) {
    additionalAttributes.defaultValue = defaultValue;
  }
  if (value === null || (value && value.isValid())) {
    additionalAttributes.value = value;
  }
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_color');
  const cssStyle = {
    backgroundColor: "#00000000",
    "--style-color": localStorage.getItem("colorstyle_color"),
  }

  return (
    <DatePicker
      ref={ref}
      allowClear={false}
      className={className}
      style={showPortal ? cssStyle : null}
      {...additionalAttributes}
      format={format}
      placeholder="选择日期"
      onChange={onSelect}
      picker={isMonth ? "month" : "date"}
      {...props}
    />
  );
});

DateInput.propTypes = {
  defaultValue: Moment,
  value: Moment,
  isMonth: PropTypes.bool,
  onSelect: PropTypes.func,
  className: PropTypes.string,
};

DateInput.defaultProps = {
  defaultValue: null,
  value: undefined,
  isMonth: false,
  onSelect: () => {},
  className: "",
};

export default DateInput;
